<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | CustomLink demo</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
	<link rel="STYLESHEET" type="text/css" href="../css/style.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var sudoSlider = $("#slider").sudoSlider({
				customLink:'.customLink',
				prevNext:false
			});
		});	
	</script>
	


	
</head>
<body>
<div id="container">
	<h1>Sudo Slider jQuery Plugin - CustomLink demo</h1> 
	<a href="http://webbies.dk/SudoSlider/help/#Settings-CustomLink">CustomLink in docs</a>
    <h3>CustomLinks can be any html element, just make sure the html element is matched by the CSS selector in the customLink option. </h3>
	<div style="position:relative;">
		<div id="slider">
			<ul>				
				<li><img src="../images/01.jpg" alt="image description"/></li>
				<li><img src="../images/02.jpg" alt="image description"/></li>
				<li><img src="../images/03.jpg" alt="image description"/></li>
				<li><img src="../images/04.jpg" alt="image description"/></li>
				<li><img src="../images/05.jpg" alt="image description"/></li>			
			</ul>
		</div>
        <a href="javascript:void(0);" class="customLink" data-target="1">Link to slide number 1</a><br />
        <h3 class="customLink" data-target="next">Link to the next slide</h3>
        <a href="javascript:void(0);" class="customLink" data-target="last">Link to the last slide</a><br />
        <a href="javascript:void(0);" class="customLink" data-target="prev">Link to the previous slide</a><br />
        <img width="100" height="30" class="customLink" data-target="5" src="../images/05.jpg" alt="image description"/><br/>
        <a href="javascript:void(0);" class="customLink" data-target="3">Link to slide number 3</a><br />
        <a href="javascript:void(0);" class="customLink" data-target="first">Link to the first slide</a><br />
	</div>
	<h3>Usage</h3>
	<h4>Include the javascripts</h4>
	<pre>
&lt;script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="../js/jquery.sudoSlider.min.js"&gt;&lt;/script&gt;</pre>
	<h4>The Javascript to start it.</h4>
	<pre>
&lt;script type="text/javascript" &gt;
    $(document).ready(function(){	
        var sudoSlider = $("#slider").sudoSlider({
           customLink:'.customLink',
           prevNext:false
        });
    });
&lt;/script&gt;</pre>
	<h4>The HTML</h4>
	<pre>
&lt;div id="slider" &gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;img src="../images/01.jpg" alt="image description"/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="../images/02.jpg" alt="image description"/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="../images/03.jpg" alt="image description"/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="../images/04.jpg" alt="image description"/&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src="../images/05.jpg" alt="image description"/&gt;&lt;/li&gt;	
    &lt;/ul&gt;
&lt;/div&gt;
&lt;a href="javascript:void(0);" class="customLink" data-target="1"&gt;Link to slide number 1&lt;/a&gt;&lt;br /&gt;
&lt;h3 class="customLink" data-target="next"&gt;Link to the next slide&lt;/h3&gt;
&lt;a href="javascript:void(0);" class="customLink" data-target="last"&gt;Link to the last slide&lt;/a&gt;&lt;br /&gt;
&lt;a href="javascript:void(0);" class="customLink" data-target="prev"&gt;Link to the previous slide&lt;/a&gt;&lt;br /&gt;
&lt;img width="100" height="30" class="customLink" data-target="5" src="../images/05.jpg" alt="image description"/&gt;&lt;br/&gt;
&lt;a href="javascript:void(0);" class="customLink" data-target="3"&gt;Link to slide number 3&lt;/a&gt;&lt;br /&gt;
&lt;a href="javascript:void(0);" class="customLink" data-target="first"&gt;Link to the first slide&lt;/a&gt;&lt;br /&gt;
</pre>
</div>

<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>